<!DOCTYPE html>
<html style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
  <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;

    var data1 = [];
    var data2 = [];
    var data3 = [];

    var random = function (max) {
      return (Math.random() * max).toFixed(3);
    };

    for (var i = 0; i < 500; i++) {
      data1.push([random(15), random(10), random(1)]);
      data2.push([random(10), random(10), random(1)]);
      data3.push([random(15), random(10), random(1)]);
    }

    option = {
      animation: false,
      legend: {
        data: ['scatter', 'scatter2', 'scatter3']
      },
      tooltip: {
        position: function (pos, params, dom, rect, size, point) {
          let left1 = pos[0],
            top1 = pos[1],
            Tleft = size.viewSize[0] - size.contentSize[0],
            Ttop = size.viewSize[1] - size.contentSize[1] - 100;

          if (left1 > Tleft - 100) {
            left1 = Tleft;
          } else if (top1 > Ttop) {
            top1 = Ttop;
          }
          return {
            left: left1,
            top: top1
          };
        }
      },
      xAxis: {
        type: 'value',
        min: 'dataMin',
        max: 'dataMax',
        splitLine: {
          show: true
        }
      },
      yAxis: {
        type: 'value',
        min: 'dataMin',
        max: 'dataMax',
        splitLine: {
          show: true
        }
      },
      dataZoom: [{
          type: 'slider',
          show: true,
          // xAxisIndex: [0],
          start: 1,
          end: 35
        },
        // {
        //     type: 'slider',
        //     show: true,
        //     yAxisIndex: [0],
        //     left: '93%',
        //     start: 29,
        //     end: 36
        // },
        {
          type: 'inside',
          // xAxisIndex: [0],
          start: 1,
          end: 35
        },
        // {
        //     type: 'inside',
        //     yAxisIndex: [0],
        //     start: 29,
        //     end: 36
        // }
      ],
      series: [{
          name: 'scatter',
          type: 'scatter',
          itemStyle: {
            normal: {
              opacity: 0.8
            }
          },
          symbolSize: function (val) {
            return val[2] * 40;
          },
          data: data1
        },
        {
          name: 'scatter2',
          type: 'scatter',
          itemStyle: {
            normal: {
              opacity: 0.8
            }
          },
          symbolSize: function (val) {
            return val[2] * 40;
          },
          data: data2
        },
        {
          name: 'scatter3',
          type: 'scatter',
          itemStyle: {
            normal: {
              opacity: 0.8,
            }
          },
          symbolSize: function (val) {
            return val[2] * 40;
          },
          data: data3
        }
      ]
    };
    if (option && typeof option === "object") {
      myChart.setOption(option, true);
    }
  </script>
</body>

</html>